<template>
  <div class="ml-2 flex-1">
    <div>
      <a-card :bordered="false" style="height: 830px; width: 1380px">
        <a-form layout="inline" ref="formRef">
          <a-form-item label="申请时间">
            <a-range-picker v-model:value="time" />
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              :icon="h(SearchOutlined)"
              @click="onSearch"
            >
              查询
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              style="margin-left: 10px"
              :icon="h(ReloadOutlined)"
              @click="onReset"
            >
              重置
            </a-button>
          </a-form-item>
        </a-form>
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :pagination="pagination"
          class="mt-5"
          :row-class-name="
            (_record: any, index: number) =>
              index % 2 === 1 ? 'table-striped' : null
          "
          :scroll="{ x: 4000, y: 550 }"
          rowKey="areaID"
        >
        </a-table>
      </a-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, h } from 'vue';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import {
  getPreAccountApi,
  createPreAccountApi,
  chargeRefundApi,
  getRefundRecordApi2,
} from '#/api/core/charge';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

const props = defineProps({
  selectedNodeId: {
    type: Array,
    default: [],
  },
});
const formRef = ref(null);
const areaID = ref('');
const labelCol = { style: { width: '120px' } };
const rules = {
  totalAmount: [{ required: true, message: '请输入充值金额', trigger: 'blur' }],
};
// 充值弹窗
const confirmVisible = ref(false);
const formData = ref({
  zczje: '',
  zhye: '',
  totalAmount: '',
  type: 1,
});
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const time = ref('');
const columns = [
  { title: '公司名称', dataIndex: 'comName', key: 'comName', align: 'center' },
  { title: '小区名称', dataIndex: 'village', key: 'village', align: 'center' },
  {
    title: '住址',
    dataIndex: 'houseAddress',
    key: 'houseAddress',
    align: 'center',
  },
  {
    title: '住户编号',
    dataIndex: 'alipayConsNo',
    key: 'alipayConsNo',
    align: 'center',
  },
  { title: '住户姓名', dataIndex: 'holder', key: 'holder', align: 'center' },
  {
    title: '用户电话',
    dataIndex: 'holdPhone',
    key: 'holdPhone',
    align: 'center',
  },
  {
    title: '面积名称',
    dataIndex: 'areaName',
    key: 'areaName',
    align: 'center',
  },
  {
    title: '预收款账户编号',
    dataIndex: 'yskzhbh',
    key: 'yskzhbh',
    align: 'center',
  },
  { title: '总充值金额', dataIndex: 'zczje', key: 'zczje', align: 'center' },
  { title: '总扣减金额', dataIndex: 'zkjje', key: 'zkjje', align: 'center' },
  { title: '账户余额', dataIndex: 'zhye', key: 'zhye', align: 'center' },
  { title: '归属人', dataIndex: 'gsr', key: 'gsr', align: 'center' },
  { title: '联系电话', dataIndex: 'lxdh', key: 'lxdh', align: 'center' },
  { title: '使用状态', dataIndex: 'syzt', key: 'syzt', align: 'center' },
  { title: '开户时间', dataIndex: 'khsj', key: 'khsj', align: 'center' },
  { title: '销户时间', dataIndex: 'xhsj', key: 'xhsj', align: 'center' },
  { title: '面积id', dataIndex: 'areaID', key: 'areaID', align: 'center' },

  {
    title: '房屋名称',
    dataIndex: 'houseName',
    key: 'houseName',
    align: 'center',
  },
  {
    title: '充值金额',
    dataIndex: 'totalAmount',
    key: 'totalAmount',
    align: 'center',
  },
  { title: '余额', dataIndex: 'balance', key: 'balance', align: 'center' },
  {
    title: '总充值金额',
    dataIndex: 'ztotalAmount',
    key: 'ztotalAmount',
    align: 'center',
  },
  { title: '总余额', dataIndex: 'zbalance', key: 'zbalance', align: 'center' },
  {
    title: '扣减传的参数',
    dataIndex: 'deduction',
    key: 'deduction',
    align: 'center',
  },
  {
    title: '扣减传的参数',
    dataIndex: 'zdeduction',
    key: 'zdeduction',
    align: 'center',
  },
  { title: '变动类型', dataIndex: 'bdlx', key: 'bdlx', align: 'center' },
  { title: '操作人', dataIndex: 'czr', key: 'czr', align: 'center' },
  {
    title: '接收人',
    dataIndex: 'recipient',
    key: 'recipient',
    align: 'center',
  },
  {
    title: '备注',
    dataIndex: 'notes',
    key: 'notes',
    align: 'center',
    fixed: 'right',
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    align: 'center',
    fixed: 'right',
  }, // type: 1充值, title can be '类型'
  {
    title: '变动金额',
    dataIndex: 'bdje',
    key: 'bdje',
    align: 'center',
    fixed: 'right',
  },
];
const dataSource = ref([]);
const onSearch = () => {
  if (!props.selectedNodeId || props.selectedNodeId.length === 0) {
    message.error('请选择左侧树结构！');
    return;
  } else if (!time.value) {
    message.error('请选择时间！');
    return;
  } else {
    const query = {
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
      time: time.value
        ? dayjs(time.value[0]).format('YYYY-MM-DD') +
          ',' +
          dayjs(time.value[1]).format('YYYY-MM-DD')
        : '',
      treeData: props.selectedNodeId,
    };
    getRefundRecordApi2(query).then((res: any) => {
      console.log(res);
      pagination.total = res.data.data.total;
      dataSource.value = res.data.data.data;
    });
  }
};
const onReset = () => {
  formRef.value.validate();
};
</script>
<style scoped></style>
